<mat-action-list>
  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
    <mat-button-toggle (click)="back()" value="bold">Back</mat-button-toggle>
    <button mat-raised-button (click)="exportToExcel()" color="primary">Export to Excel</button>
    <button mat-raised-button (click)="openBottomSheet()" color="accent">Filter</button>
  </mat-button-toggle-group>
  
</mat-action-list>
<div
  class="search-results"
  infiniteScroll
  [infiniteScrollDistance]="2"
  [infiniteScrollThrottle]="15"
  (scrolled)="onScroll()"
  [scrollWindow]="true"
>
  <mat-list>
    <h3 mat-subheader>Events</h3>
    <mat-list-item *ngFor="let event of events">
      <img
        *ngIf="event.type == 'Battery'"
        matListAvatar
        src="https://cdn4.iconfinder.com/data/icons/bold-battery-1/512/Battery_3-512.png"
        alt="..."
      />
      <img
        *ngIf="event.type == 'DoorClosed'"
        matListAvatar
        src="https://cdn3.iconfinder.com/data/icons/real-estate-glyph-1/2048/637_-_Door-512.png"
        alt="..."
      />
      <img
        *ngIf="event.type == 'DoorOpen'"
        matListAvatar
        src="https://image.flaticon.com/icons/svg/59/59801.svg"
        alt="..."
      />
      <h3 matLine>{{ event.eventDatetime | date: "medium" }}</h3>
      <p matLine>{{ event.doorName }}</p>
      <p matLine>{{ event.type }}</p>
      <p matLine>{{ event.device }}</p>
      <p matLine>{{ event.message }}</p>
      <p matLine>&nbsp;</p>
      
      <p matLine>
        <button mat-raised-button color="primary" [routerLink]="['/feedback', event.key]" matBadge="{{ (event.feedbackcnt !== null) ? event.feedbackcnt: '0'}}" matBadgePosition="after" matBadgeColor="accent">Feedback</button>&nbsp;
      </p>
      <mat-divider></mat-divider>
    </mat-list-item>
  </mat-list>
</div>
